<template>
  <img src="../../assets/front/index/banner.webp" class="banner" />
  <div class="service-container">
    <div class="service">
      <img src="../../assets/front/index/service-icon-1.png" />
      <div>
        <h4>体检预约</h4>
        <p>一站式预约服务</p>
      </div>
    </div>
    <div class="service">
      <img src="../../assets/front/index/service-icon-2.png" />
      <div>
        <h4>报告查询</h4>
        <p>体检报告快速查询</p>
      </div>
    </div>
    <div class="service">
      <img src="../../assets/front/index/service-icon-3.png" />
      <div>
        <h4>活动热卖</h4>
        <p>当季推荐特惠商品</p>
      </div>
    </div>
    <div class="service">
      <img src="../../assets/front/index/service-icon-4.png" />
      <div>
        <h4>企业专区</h4>
        <p>企业专属健康服务</p>
      </div>
    </div>
  </div>
  <div class="goods-container">
    <nav>
      <h3>活动专区</h3>
      <el-link :icon="Plus" :underline="false"
               @click="moreHandle">查看更多</el-link>
    </nav>
    <ul class="goods-list">
      <li class="item" v-for="one in data.part_1">
        <div class="card">
          <img :src="one.image" />
          <h4>{{ one.title }}</h4>
          <el-tooltip class="box-item" effect="dark" placement="top">
            <template #content>
              <div style="width: 260px;">{{ one.description }}
              </div>
            </template>
            <p class="desc">
              <span>折</span>
              {{ one.description }}
            </p>
          </el-tooltip>
          <p class="price">
            <span class="current">￥{{ one.currentPrice }}</span>
            <span class="old">￥{{ one.initialPrice }}</span>
            <span class="sale">已售{{ one.salesVolume }}</span>
          </p>
          <input type="button" class="buy-btn" value="立即购买"
                 @click="buyHandle(one.id)" />
        </div>
      </li>
    </ul>
  </div>

  <div class="goods-container">
    <nav>
      <h3>热卖套餐</h3>
      <el-link :icon="Plus" :underline="false"
               @click="moreHandle">查看更多</el-link>
    </nav>
    <ul class="goods-list">
      <li class="item" v-for="one in data.part_2">
        <div class="card">
          <img :src="one.image" />
          <h4>{{ one.title }}</h4>
          <el-tooltip class="box-item" effect="dark" placement="top">
            <template #content>
              <div style="width: 260px;">{{ one.description }}
              </div>
            </template>
            <p class="desc">
              <span>折</span>
              {{ one.description }}
            </p>
          </el-tooltip>
          <p class="price">
            <span class="current">￥{{ one.currentPrice }}</span>
            <span class="old">￥{{ one.initialPrice }}</span>
            <span class="sale">已售{{ one.salesVolume }}</span>
          </p>
          <input type="button" class="buy-btn" value="立即购买"
                 @click="buyHandle(one.id)" />
        </div>
      </li>
    </ul>
  </div>

  <div class="goods-container">
    <nav>
      <h3>新品推荐</h3>
      <el-link :icon="Plus" :underline="false"
               @click="moreHandle">查看更多</el-link>
    </nav>
    <ul class="goods-list">
      <li class="item" v-for="one in data.part_3">
        <div class="card">
          <img :src="one.image" />
          <h4>{{ one.title }}</h4>
          <el-tooltip class="box-item" effect="dark" placement="top">
            <template #content>
              <div style="width: 260px;">{{ one.description }}
              </div>
            </template>
            <p class="desc">
              <span>折</span>
              {{ one.description }}
            </p>
          </el-tooltip>
          <p class="price">
            <span class="current">￥{{ one.currentPrice }}</span>
            <span class="old">￥{{ one.initialPrice }}</span>
            <span class="sale">已售{{ one.salesVolume }}</span>
          </p>
          <input type="button" class="buy-btn" value="立即购买"
                 @click="buyHandle(one.id)" />
        </div>
      </li>
    </ul>
  </div>

<!-- 跑马灯 -->
  <div class="partner-container">
    <h3>—&nbsp;&nbsp;合作伙伴&nbsp;&nbsp;—</h3>
    <el-carousel height="220px" :autoplay="false">
      <el-carousel-item>
        <el-row :gutter="20">
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c1.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c2.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c3.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo"  src="../../assets/front/index/c4.png" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <img class="logo"  src="../../assets/front/index/c5.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo"  src="../../assets/front/index/c6.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo"  src="../../assets/front/index/c7.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c8.png" />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row :gutter="20">
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c9.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c10.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c11.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c12.png" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c13.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c14.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c15.png" />
          </el-col>
          <el-col :span="6">
            <img class="logo" src="../../assets/front/index/c16.png" />
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>


</template>

<script lang="ts" setup>
import { reactive, ref, Ref, getCurrentInstance } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import router from '../../router/index';
const { proxy } = getCurrentInstance();



const data = reactive({
  part_1: [],
  part_2: [],
  part_3: []
});

//加载体检套餐信息
let json = {
  partIds: [1, 2, 3]
};
proxy.$http('/front/goods/searchIndexGoodsByPart', 'POST', json, true, function (resp) {
  let result = resp.result;
  //处理第一个区域的封面图片
  for (let one of result['1']) {
    one.image = `${proxy.$minioUrl}/${one.image}`;
  }
  data['part_1'] =  result['1'];

  //处理第二个区域的封面图片
  for (let one of result['2']) {
    one.image = `${proxy.$minioUrl}/${one.image}`;
  }
  data['part_2'] =  result['2'];

  //处理第三个区域的封面图片
  for (let one of result['3']) {
    one.image = `${proxy.$minioUrl}/${one.image}`;
  }
  data['part_3'] =  result['3'];

});

//跳转商品详情页
function buyHandle(id) {
  router.push({ name: 'FrontGoods', params: { id: id } });
}
//更多商品列表
function moreHandle() {
  router.push({ name: "FrontGoodsList" })
}




/*const data = reactive({
  part_1: [
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
  ],
  part_2: [
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
  ],
  part_3: [
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
    {
      title: "新感恩敬老中级体检套餐",
      image: `${proxy.$minioUrl}/front/goods/3510fb377af44dc3a2320e7bfa81e8f1.jpg`,
      description: "「感恩季到检钜惠」适合人群：适用于中、老年人及血管疾病人群 （参加第二件0元活动 需加入购物车后数量选2）",
      currentPrice: 2142.00,
      initialPrice: 2249.00,
      salesVolume: 123
    },
  ]
});*/


</script>

<style lang="less" scoped>
@import url('index.less');
</style>
